<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
        :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">我的意向</div>
        </template>
        <div class="intent"><el-button type="primary" @click="clearIntent">清空意向</el-button></div>
        <el-table v-loading="loading" :data="intentionData">
            <el-table-column label="商品名称" align="center" prop="styleName">
                <template #default="scope">
                    <div class="color_theme">{{ scope.row.styleName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="商品编码" align="center" prop="styleCode" />
            <el-table-column label="商品主图" align="center" prop="productImage" width="100">
                <template #default="scope">
                    <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                </template>
            </el-table-column>
            <el-table-column label="类目" align="center" prop="categoryName">

            </el-table-column>
            <el-table-column label="招商员" align="center" prop="recruiter" />
            <el-table-column label="售价" align="center" prop="storeName" />
            <el-table-column label="佣金" align="center" prop="commission" />
            <el-table-column label="售价" align="center" prop="price" />
            <el-table-column label="卖点" align="center" prop="sellingPoints" />
            <el-table-column label="状态" align="center" prop="auditStatus">
                <template #default="scope">
                    <div>{{ auditStatusNameById(scope.row.auditStatus) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" @click="handleDelete(scope.row)" class="color_themes">
                        删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

    </el-drawer>
</template>
<script setup name="Intention" lang="ts">
import { auditStatusNameById } from '@/utils/auditStatusFilter'
import { SupplierAddProductsVO } from '@/api/system/supplierAddProducts/types';
import { getIntentionPage } from '@/api/group/qualityControl'
import { anchorSupplierIntention, clearIntention } from '@/api/group/qualityControl'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_category } = toRefs<any>(proxy?.useDict('hm_category'));
const intentionData = ref<SupplierAddProductsVO[]>([])
const total = ref(0);
const loading = ref(false);
const queryParams = ref(
    {
        pageNum: 1,
        pageSize: 10,
    }
)


const props = defineProps({
    intentionVisible: {
        type: Boolean,
        default: false
    }
});
watch(
    () => props.intentionVisible,
    async (val) => {
        if (val) {
            getList()
        }
    }
)
const show = computed(() => props.intentionVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

/** 查询我的意向列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await getIntentionPage(queryParams.value);
        intentionData.value = res.rows;
        total.value = res.total;
        loading.value = false;
    } catch (e) {
    } finally {
        loading.value = false;
    }
};

// 删除操作
const handleDelete = async (row?: SupplierAddProductsVO) => {
    console.log('删除操作',)
    const _ids = row?.id;
    const _names = row?.styleName;
    await proxy?.$modal.confirm('是否确认删除，商品名称为"' + _names + '"的数据项？').finally(() => (loading.value = false));
    await anchorSupplierIntention({ productsId: _ids });
    proxy?.$modal.msgSuccess('删除意向成功');
    getList()
}
// 清空意向
const clearIntent = async () => {
    console.log('清空意向')
    await proxy?.$modal.confirm('是否确认删除全部意向').finally(() => (loading.value = false));
    await clearIntention();
    proxy?.$modal.msgSuccess('删除意向成功');
    getList()
}

</script>
<style lang="scss" scoped>
.color_theme {
    // color: rgba(1, 147, 255) !important;
}

.color_themes {
    color: rgb(213, 15, 15);
}

.intent {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
</style>